<template>
	<view>
		<view class="container">
			<view class="title">
				<text>信息内容</text>
			</view>
			<view class="massageInput">
				<form name="my_form" method="POST">
					<view class="textInput">
						<textarea class="text-area"style="padding: 20rpx;" cols="8" rows="20" placeholder="请输入..." maxlength="100"></textarea>
					</view>

				</form>
			</view>
			<view class="btn">
				<view class="Icon">
					<view class="sendBtn">
						<image class="sendIcon" src="../../static/logo.png" mode=""></image>

					</view>
					<view class="sendText">
						<text>发送消息</text>
					</view>
				</view>
				<view class="Icon">
					<view class="voiceBtn">
						<image class="voiceIcon" src="../../static/logo.png" mode=""></image>

					</view>
					<view class="voiceText">
						<text>语音输入</text>
					</view>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style>
	.container {
		width: 90%;
		height: 75vh;
		position: relative;
		top: -8vh;
		margin: 0 auto;
		background-color: #ffffff;
		/* border: 1rpx solid #000000; */
		border: 1px solid #bfbfbf;
		box-shadow: 0 0 10px 2px #bdcee0;
		border-radius: 3vw;
	}

	.title {
		display: block;
		justify-content: left;
		margin: 2vh 0 0 5vw;
		width: 30vw;
		height: 5vh;
		font-size: 52rpx;
		border: 500;
	}

	.form {
		margin-top: 75rpx;
	}

	.textInput {
		width: 100%;
		height: 100%;
	}

	.text-area {
		font-size: 48rpx;
		/* text-indent: 5%; */
		width: 90%;
		height: 90%;
		line-height: 100rpx;
	}

	.massageInput {
		width: 90%;
		height: 40vh;
		margin: 2vh auto;
		border-radius: 2vh;
		border: 1px solid #bfbfbf;
		box-shadow: 0 0 10px 2px #bdcee0;
	}

	.btn {
		display: flex;
		justify-content: right;
		height: 180rpx;
		float: left;
		
		margin-left: 45vw;


	}
	
	.Icon{
		width: 100rpx;
		height: 180rpx;
		margin-left: 5vw;
	}
	.sendBtn,
	.voiceBtn {
		/* float: right; */
		/* margin: 0 7vw 2vh 0; */
		width: 100rpx;
		height: 100rpx;
		border-radius: 1vh;
	}

	.sendIcon,
	.voiceIcon {
		max-width: 100%;
		max-height: 100%;
	}

	.sendText,
	.voiceText {
		width: 100rpx;
		height: 80rpx;
		margin: 2vh auto;
		font-size: 24rpx;
		font-weight: bold;
		
		/* float: right; */

	}
</style>
